<template>
  <div class="dataAnalysis">
    <div class="header-top">
      <div class="head-title" @click="gotoPage()">
        <i class="el-icon-back"></i>智能问卷-数据分析
      </div>
    </div>
    <div class="content-big">
      <div class="content-main">
        <div class="content-title">问卷信息</div>
        <div class="info">
          <img src="../../../assets/images/default-cover.png"/>
           <div class="info-right">
              <div class="title-left">
                问卷标题
                <span class="type">已发布</span>
              </div>
             <div class="creatTime">2024-04-03 17:14:32 创建 <span>永不截止</span></div>
             <div class="userInfo">创建人：<span>主账号</span></div>
           </div>
        </div>
      </div>
      <div class="content-main">
        <div class="content-title">数据总览</div>
        <ul class="dataScreening">
          <li>
            <div class="li-title">今日点击人数</div>
            <div class="li-number">0</div>
          </li>
          <li>
            <div class="li-title">今日填写人数
              <el-tooltip class="item" effect="dark" content="填写但未提交的人+已提交的人" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
            </div>
            <div class="li-number">0</div>
          </li>
          <li>
            <div class="li-title">今日提交人数</div>
            <div class="li-number">0</div>
          </li>
          <li>
            <div class="li-title">
              总点击人数
              <el-tooltip class="item" effect="dark" content="填写但未提交的人+已提交的人" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <div class="li-number">0</div>
          </li>
          <li>
            <div class="li-title">总填写人数</div>
            <div class="li-number">0</div>
          </li>
          <li>
            <div class="li-title">总提交人数</div>
            <div class="li-number">0</div>
          </li>
        </ul>
      </div>
      <div class="content-main">
        <ul class="tablist">
          <li :class="active==0?`active`:``" @click="getActive(0)">表单内容分析</li>
          <li :class="active==1?`active`:``" @click="getActive(1)">客户数据详情</li>
          <li :class="active==2?`active`:``" @click="getActive(2)">问卷统计</li>
        </ul>
        <!--    表单内容分析-->
        <formAnalysis v-if="active==0"></formAnalysis>
<!--        客户数据详情-->
        <customerData v-if="active==1"></customerData>
<!--        问卷统计-->
        <questionnaireStatistics v-if="active==2"></questionnaireStatistics>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'dataAnalysis',
  components: {
    'formAnalysis': () => import('./formAnalysis.vue'),//表单内容分析
    'customerData': () => import('./customerData.vue'),//客户数据分析
    'questionnaireStatistics': () => import('./questionnaireStatistics.vue'),//问卷统计
  },
  data() {
    return {
      active:0,
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    getActive(index){
      this.active=index;
    },
    gotoPage() {
      this.$router.push({
        path: '/customerOperationsMgt/inQuestionMgt/inQuestionList',
      })
    },
  }
}
</script>

<style scoped lang="scss">
.other-option {
  height: 30px;
  display: flex;
  align-items: center;
  color: #2d8cf0;
  font-size: 14px;
  margin-left: 15px;
  border-top: 1px solid #eee;
}

.tips {
  display: block;
  background: #fed;
  border-radius: 2px;
  border: 1px solid #ffdbb6;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  width: 1000px;
  margin: 20px auto;
  font-size: 14px;
}

.content-big {
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 0px;

  margin: auto;
  overflow-x: hidden;
}

.content-main {
  background: #fff;
  padding-bottom: 12px;
  margin-bottom: 12px;

  .content-title {
    font-size: 14px;
    border-bottom: 1px solid #eee;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: #f9f9f9;
  }
}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;

  .head-title {
    font-size: 14px;
    line-height: 22px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;

    i {
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
  }

}
/* 通过外部CSS设置编辑器大小 */
::v-deep .ql-editor {
  height: 200px;
}
.footer-btn {
  position: absolute;
  left: 0px;
  right: 0px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.dataAnalysis {
  position: relative;
  padding-bottom: 50px;
}
.info {
  padding: 0px 24px 12px 24px;
  display: flex;
  img{
    width: 160px;
    height: 90px;
    background: #ccc;
    margin-right: 16px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    object-fit: cover;
  }
  .title-left {
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    line-height: 26px;
    font-weight: bolder;
    .type {
      color: #096dd9;
      background: #e6f7ff;
      border: 1px solid #e9e9e9;
      border-color: #91d5ff;
      margin-left: 12px;
      margin-right: 0;
      padding: 2px 7px;
      height: 26px;
      border-radius: 4px;
      font-size: 12px;
    }
  }
  .creatTime {
    color: #666;
    margin-top: 8px;
    line-height: 22px;
    font-size: 14px;
  }
  .userInfo {
    color: #666;
    margin-top: 8px;
    line-height: 22px;
    font-size: 14px;
  }
}
.dataScreening {
 display: flex;
  padding: 20px;
  li {
    flex: 1;
    list-style: none;
    .li-title {
      margin-bottom: 4px;
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
    }
    .li-number {
      color: rgba(0, 0, 0, .85);
      font-size: 24px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    }
  }
}
.tablist {
  display: flex;
  height: 54px;
  align-items: center;
  padding-left: 40px;
  background: #f9f9f9;
  li {
    list-style: none;
    font-size: 14px;
    margin-right: 20px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    &.active {
      color: #3070ff;
      &:after{
        height: 2px;
        background: #2d8cf0;
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        content: '';
      }
    }
  }
}
</style>
